<template>
    <FilmList :list="list" :type="1"  @getMoreData="getCityMoviesInfo"/>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { nowPlayingListData } from '../api/apis';
import { ListType } from '../types';
import FilmList from '../components/FilmList.vue'


/**
 * 1. 先写静态页面和 css 在日常工作中 占比  50%
 * 2. 创建对对应的响应式数据对象，实现页面的基础操作逻辑
 * 3. 查阅 接口文档， 可以使用 postMan 测试，配置对应的 API 接口
 * 4. 调用接口得到目标数据，绑定到 响应式数据对象上
 * 5. 根据得到的数据，进行二次清洗或其他操作，确保能够正常的渲染到页面上
 * 6. 进行细粒度的拆分，将项目变的 模块化
 */

// 分页数据
let page = "1"

// 电影列表数据
// const list = ref<Array<ListType>>([])
const list = ref<ListType[]>([])

const getCityMoviesInfo = async () => {
    let res = await nowPlayingListData(page);
    console.log(res.data.films);
    list.value = [...list.value , ...res.data.films];
    page = (parseInt(page) + 1).toString();
}
getCityMoviesInfo();

</script>

<style scoped></style>